<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { inject, ref, reactive } from 'vue';
const baseUrl = inject('baseUrl');
const top = ref(0);
const keyword = ref('');
// const list3 = ref([
//   "https://img.zcool.cn/community/0147bc606fef1911013fb1172fc772.jpg@2o.jpg",
//   "https://img95.699pic.com/photo/40083/2170.jpg_wh300.jpg!/fh/300/quality/90",
//   "https://img.zcool.cn/community/0128445542943a0000019ae954e816.jpg@1280w_1l_2o_100sh.jpg",
// ])
const list = ref([
  {
    thumb: '@/static/temp/temp1.png',
    title: '健康饮食作品征集',
  },
  {
    thumb: '@/static/temp/temp1.png',
    title: '运动挑战赛',
  },
]);
const list2 = ref([
  {
    thumb: '@/static/temp/temp1.png',
    title: '心理咨询师',
  },
  {
    thumb: '@/static/temp/temp1.png',
    title: '运动健身师',
  },
]);
const list3 = ref([
  {
    thumb: '@/static/temp/temp1.png',
    title: '零基础骑行核心学习',
    desc: '初级 1分钟',
  },
  {
    thumb: '@/static/temp/temp1.png',
    title: '骑行核心力量强化',
    desc: '高级 42分钟',
  },
  {
    thumb: '@/static/temp/temp1.png',
    title: '长距离拉伸',
    desc: '零基础 42分钟',
  },
]);
const list4 = ref([
  {
    thumb: '@/static/temp/temp4.png',
    title: '八段锦第一式',
    desc: '初级 1分钟',
  },
  {
    thumb: '@/static/temp/temp4.png',
    title: '八段锦第二式',
    desc: '高级 42分钟',
  },
  {
    thumb: '@/static/temp/temp4.png',
    title: '八段锦第三式',
    desc: '零基础 42分钟',
  },
]);

const gotoChat = () => {
  uni.navigateTo({
    url: '/pages/chat/chat',
  });
};
</script>
<template>
  <HeadMenuBar :showTabBar="true" :showTitle="false">
    <template v-slot:default>
      <view class="content_in">
        <view class="content-header">
          <image mode="widthFix" class="content-image" src="@/static/temp/group.svg"></image>
          <view class="content-title">
            <h3>欢迎来到FoxWatch</h3>
            <span class="nf">记录健康生活</span>
          </view>
        </view>
        <view class="myConmponents_1">
          <view class="befor_title">
            <view class="item-title">
              最新活动
              <view class="more-btn" size="mini">查看更多</view>
            </view>
          </view>
          <up-scroll-list :indicator="false">
            <view v-for="(item, index) in list" :key="index" class="mr30">
              <image class="common-image" mode="scaleToFill" src="@/static/temp/temp1.png"></image>
              <view class="sll-title">{{ item.title }}</view>
              <view class="sll-time">2024.09-2024.10.31</view>
              <view class="sll-time">1000人报名</view>
            </view>
          </up-scroll-list>
        </view>
        <view class="myConmponents_1">
          <view class="befor_title">
            <view class="item-title">
              热门AI
              <view class="more-btn" size="mini">查看更多</view>
            </view>
          </view>
          <up-scroll-list :indicator="false">
            <view v-for="(item, index) in list2" :key="index" class="mr30">
              <image class="common-image" mode="scaleToFill" src="@/static/temp/temp1.png"></image>
              <view class="sll-title">{{ item.title }}</view>
            </view>
          </up-scroll-list>
        </view>
        <view class="myConmponents_2 bgr">
          <h4 class="mb20">骑行正当红</h4>
          <view class="desc mb20">如何打破夏日的沉闷和黏腻?做一道疾驰的风!在酣畅淋 漓的骑行中一往无前，世界都将为你让路!</view>
          <view class="cmp_2_cont">
            <swiper :indicator="false" duration="150" :acceleration="true">
              <swiper-item v-for="(item, index) in list3" :key="index" class="mr30">
                <view class="group">
                  <view class="cmp_2_list">
                    <image class="cmp_2_image" mode="scaleToFill" src="@/static/temp/temp3.png"></image>
                    <view class="clo_2">
                      <view class="sll-title">{{ item.title }}</view>
                      <view class="sll-time">初级11分钟</view>
                    </view>
                  </view>
                  <view class="cmp_2_list">
                    <image class="cmp_2_image" mode="scaleToFill" src="@/static/temp/temp3.png"></image>
                    <view class="clo_2">
                      <view class="sll-title">{{ item.title }}</view>
                      <view class="sll-time">初级11分钟</view>
                    </view>
                  </view>
                </view>
              </swiper-item>
            </swiper>
          </view>
        </view>
        <view class="myConmponents_2 bgg">
          <h4 class="mb20">养身国朝</h4>
          <view class="desc mb20">柔和缓慢，圆活连贯，松紧结合，动静相兼，神与形合， 气寓其中。火爆全网的中式养生操，值得你一试!</view>
          <view class="cmp_2_cont">
            <swiper :indicator="false" duration="150" :acceleration="true">
              <swiper-item v-for="(item, index) in list4" :key="index" class="mr30">
                <view class="group">
                  <view class="cmp_2_list">
                    <image class="cmp_2_image" mode="scaleToFill" src="@/static/temp/temp4.png"></image>
                    <view class="clo_2">
                      <view class="sll-title">{{ item.title }}</view>
                      <view class="sll-time">初级11分钟</view>
                    </view>
                  </view>
                  <view class="cmp_2_list">
                    <image class="cmp_2_image" mode="scaleToFill" src="@/static/temp/temp4.png"></image>
                    <view class="clo_2">
                      <view class="sll-title">{{ item.title }}</view>
                      <view class="sll-time">初级11分钟</view>
                    </view>
                  </view>
                </view>
              </swiper-item>
            </swiper>
          </view>
        </view>
      </view>
    </template>
  </HeadMenuBar>
</template>

<style lang="scss" scoped>
// :deep(.uni-swiper-slide-frame) {
//   width: 70% !important;
// }
:deep(.uni-swiper-slide-frame) {
  width: 70% !important;
}

.group {
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: space-between;
}

.bgr {
  background-color: #faf3f3;
}

.bgg {
  background-color: #f3faf6;
}

.myConmponents_2 {
  border-radius: 20rpx;
  padding: 40rpx 20rpx !important;

  height: 500rpx;
  margin-bottom: 30rpx !important;

  .cmp_2_list {
    display: flex;
    width: 400rpx !important;

    .clo_2 {
      margin-left: 20rpx;
    }
  }

  .cmp_2_image {
    width: 100rpx;
    height: 100rpx;
    margin-right: 20rpx !important;
  }

  .desc {
    color: #555;
    font-size: 13px;
  }
}

.myConmponents_2:nth-of-type(2) {
  background-color: red !important;
}

.more-btn {
  width: 100rpx;
  height: 50rpx;
  border: solid rgba(5, 5, 5, 0.7) 1rpx;
  border-radius: 20rpx;
  font-size: 10px;
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
}

.myConmponents_1 {
  width: auto;
  height: auto;
  margin-bottom: 20rpx !important;
}

.sll-time {
  color: #555;
  font-size: 13px;
}

.sll-title {
  // font-weight: 610;
  // font-size: 13px;
  margin-bottom: 15rpx !important;
  font-size: 13px !important;
  font-weight: 500;
}

.mr30 {
  margin-right: 30rpx !important;
}

.common-image {
  width: 400rpx;
  height: 200rpx;
  border-radius: 30rpx;
}

.scroll-list {
  height: 200rpx;
  width: 100%;
}

.befor_title {
  position: relative;
  padding-left: 20rpx !important;
  margin-bottom: 20rpx !important;

  .item-title {
    display: flex;
    width: 100%;
    justify-content: space-between;
    font-size: 15px;
    font-weight: 500;
  }
}

.befor_title::before {
  content: '';
  position: absolute;
  width: 7rpx;
  height: 12px;
  left: 0px;
  top: 5px;
  background-color: #2bd78f;
  border-radius: 10rpx;
}

.mb50 {
  margin-bottom: 50rpx !important;
}

.mb20 {
  margin-bottom: 20rpx !important;
}

.content-header {
  width: 100%;
}

.nf {
  font-size: $nomarl-font-size;
}

* {
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
}

.title {
  width: 100%;
  padding: 0 $fox-padding;
  display: flex;
  font-size: 15px;

  .icon {
    width: 50rpx;
    height: 50rpx;
  }

  .search {
    flex: 1;
  }

  .medal {
    width: 80rpx;
    display: flex;
    justify-content: center;
  }

  .message {
    width: 80rpx;
    justify-content: center;
  }
}

.content_in {
  overflow-y: auto;
  width: calc(100% - 60rpx);
  margin-left: 30rpx !important;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;

  .content-image {
    width: 100%;
    border-top-left-radius: 60rpx;
    border-top-right-radius: 60rpx;
    overflow: hidden;
    height: 400rpx;
    padding: 0;
    margin: 0;
  }

  .content-title {
    height: 140rpx;
    padding: 20rpx !important;
    border-bottom-left-radius: 30rpx;
    border-bottom-right-radius: 30rpx;
    background-color: #f5f9f2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transform: translateY(-60rpx);
    filter: brightness(0.98);
  }
}
</style>
